<!--
/**
* Author: linchun
* Date: 2022-08-09 18:08
* Desc: chooseViewers 观影人列表
*/
-->
<template>
  <view class="choose-viewers pageBgColor">
    <view class="choose-viewers__box">
      <!-- 列表 -->
      <view class="u-demo-block">
        <view>
          <view class="u-page__checkbox-item">
            <u-checkbox-group
              v-model="checkId"
              @change="checkboxChange"
              :border-bottom="true"
              placement="column"
              icon-placement="left"
            >
              <view
                class="choose-viewers__item flex-b-m"
                :class="extItemClass"
                v-for="item in list"
                :key="item.realNameId"
              >
                <u-checkbox
                  class="checkbox-item"
                  :label="item.realName"
                  :name="item.realNameId"
                  icon-size="30rpx"
                  label-size="26rpx"
                  label-color="#333"
                  active-color="#44c4e9"
                  inactive-color="#e0e0e0"
                  shape="circle"
                >
                </u-checkbox>
                <view>
                  {{ item.idCardNo }}
                </view>

                <u-icon
                  class="icon-del"
                  name="trash"
                  size="18"
                  @click="onDel(item.realNameId)"
                ></u-icon>
              </view>
            </u-checkbox-group>
          </view>
        </view>
      </view>
      <!-- 按钮 -->
      <view class="choose-viewers__addBtn" @click="toCustomerAdd">
        +新增观影人
      </view>
    </view>
    <view class="choose-viewers__footer flex-c-m">
      <view class="choose-viewers__confirmBtn" @click="handelSubmit">
        确定
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'choose-viewers',
    data() {
      return {
        list: [],
        checkId: [],
        cacheList: [],
        query: {}
      }
    },
    components: {},
    props: {
      content: {
        type: String,
        default: ''
      }
    },
    created() {},
    computed: {
      extItemClass() {
        return !this.query.isSelect ? 'hasNoCheckBox' : ''
      },
      showDisabled() {
        const checkLen = this.getCheckList().length
        return checkLen > 0 && checkLen + '' !== this.query.ticketNum
      },
      disabledClass() {
        return this.showDisabled ? 'showDisabledBtn' : ''
      }
    },
    onLoad(options) {
      console.log('options', options)
      this.query = options || {}
    },
    onShow() {
      this.getRealNameList()
      const cache_realNameList =
        this.$utils.deep(this.$auth.getRealNameList()) || []
      this.checkId = cache_realNameList.map((v) => v.realNameId)
    },
    watch: {
      checkId(newValue, oldValue) {}
    },
    methods: {
      // 初始化方法
      init() {},
      checkboxChange(n) {
        this.checkId = this.$utils.deep(n)
      },
      getRealNameList() {
        uni.$api.user.getRealNameList().then((res) => {
          this.list = res.list
        })
      },
      onDel(id) {
        this.$msg.showModal('是否删除该观影人信息').then(() => {
          uni.$api.user.delRealName({ realNameId: id }).then(() => {
            this.getRealNameList()
            this.$msg.toast('删除成功!')
          })
        })
      },
      toCustomerAdd() {
        this.$tools.navigateTo('/subPages/customerAdd/index')
        // this.$to('/subPages/customerAdd/index')
      },
      // 获取选中的详细数据
      getCheckList() {
        const checklist = this.list.filter((i) =>
          this.checkId.includes(i.realNameId)
        )
        return checklist
      },
      handelSubmit() {
        const checkList = this.getCheckList()
        if (this.showDisabled) {
          this.$msg.toast('勾选的观影人数量与座位数不一致')
          //不满足选择要求不可点击
          return
        }
        this.$auth.setRealNameList(checkList) //储存已选
        uni.setStorageSync('fromRealName', '1')
        this.$tools.navigateTo(-1)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .choose-viewers {
    height: 100%;
    overflow-y: hidden;
    box-sizing: border-box;
    &__box {
      margin: 20rpx;
      padding: 7rpx 20rpx 0 30rpx;
      background: #fff;
      border-radius: 20rpx;
    }
    &__item {
      padding: 29rpx 0 32rpx 0;
      height: 30rpx;
      line-height: 30rpx;
      border-bottom: 1rpx solid #f3f5f7;
      /deep/ .u-checkbox {
        padding-bottom: 0 !important;
        width: 250rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      /deep/ .u-checkbox__icon-wrap {
        margin-right: 42rpx !important;
      }
      &.hasNoCheckBox {
        /deep/ .u-checkbox__icon-wrap {
          display: none;
        }
      }
    }
    &__addBtn {
      width: 100%;
      text-align: center;
      padding: 29rpx 0 39rpx 0;
      font-size: 26rpx;
      font-weight: 600;
      color: #3bc5d2;
    }
    &__footer {
      position: fixed;
      bottom: 55rpx;
      width: 100%;
      height: 100rpx;
    }
    &__confirmBtn {
      width: 710rpx;
      text-align: center;
      height: 100rpx;
      line-height: 100rpx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 20rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: #ffffff;
      &.showDisabledBtn {
        background: #dfdfdf;
      }
    }
  }
</style>
